.mdx-contents {
  @apply w-full text-slate-600;
  @apply dark:text-slate-400;

  /* 基本文本样式 */
  p {
    @apply leading-relaxed;

    & + p {
      @apply mt-4;
      @apply md:mt-5;
    }
  }

  strong {
    @apply font-bold text-slate-700;
    @apply dark:text-slate-300;
  }

  hr {
    @apply my-8 border-none;
    @apply md:my-12;

    & + * {
      @apply mt-0;
    }

    & + h2 {
      @apply -mt-2;
    }

    & + h3 {
      @apply -mt-2;
    }
  }

  /* 列表样式 */
  ul,
  ol {
    @apply ml-6 mt-5 mb-5;
    @apply md:ml-7;

    li {
      @apply relative leading-relaxed;
      padding-left: 0.4rem;

      & + li {
        @apply mt-5;
      }
    }
  }

  ul {
    @apply list-none;

    > li::before {
      @apply absolute -left-6 top-[0.5em] h-[9px] w-[9px] rounded-full bg-slate-500 content-[''];
      @apply md:-left-4;
      @apply dark:bg-slate-400;
      transition:
        transform 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
    }

    > li:hover::before {
      @apply bg-slate-700 dark:bg-slate-300;
    }

    ul,
    ol {
      @apply mt-5 ml-5;
    }

    ol > li::before {
      content: none;
    }
  }

  ol {
    @apply list-decimal;
    @apply ml-7;
    @apply md:ml-8;

    ul,
    ol {
      @apply ml-6;
    }

    li::marker {
      @apply text-slate-500 font-medium;
      @apply dark:text-slate-400;
    }

    li:hover::marker {
      @apply text-slate-700 dark:text-slate-300;
    }
  }

  /* 代码块样式 */
  :not(pre, .mdx-inline-highlight) {
    > code {
      @apply font-medium text-slate-700;
      @apply dark:text-slate-300;
      @apply bg-slate-200 dark:bg-slate-800;
      @apply rounded-md px-1;
      @apply shadow-sm dark:shadow-md;
    }
  }

  /* 引用块样式 */
  blockquote {
    @apply relative my-6 py-1 pl-6 text-slate-600;
    @apply dark:text-slate-400;

    &::before {
      @apply absolute top-0 bottom-0 left-0 w-1 rounded-full bg-slate-200 content-[''];
      @apply dark:bg-slate-800;
    }
  }
}
